<template>
  <div>
  <el-container>
    <el-header height="150">
      <div style="width: 100%;height: 20px;margin-top: 0px;margin-bottom:10px;line-height: 20px">
          <div v-if="user==null">
          <span style="margin-left: 900px">
            <a href="/login">登录</a><el-divider direction="vertical"></el-divider>
               <a href="/order">订单</a><el-divider direction="vertical"></el-divider>
          <a href="/shoppingCart">购物车</a><el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" @click="logout()">退出</a>
          </span>
          </div>
          <div v-else>
              <span style="margin-left: 900px">
               <a href="/order">订单</a><el-divider direction="vertical"></el-divider>
          <a href="/shoppingCart">购物车</a><el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" @click="logout()">退出</a>
                </span>
          </div>
        </div>
      <div style="width: 1200px;height:100px;margin: 0 auto">
        <div style="float: left">
          <a href="/">
            <img src="../../assets/imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
          </a>
        </div>
        <!--搜索框开始-->
        <div style="float: right; margin-top: 30px">
          <!--@keydown.native.enter 设置回车键按下事件-->
          <el-input v-model="keywords" @keydown.native.enter="search()" placeholder="请输入搜索内容">
            <!--slot="append"作用是将按钮追加在搜索框的后面-->
            <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <!--搜索框结束-->
      </div>
      <!--蓝色导航菜单开始-->
      <div style="background-color: #82c8ec;height: 60px;">
        <el-menu style="width: 100%"
                 @select="handleSelect"
                 class="el-menu-demo"
                 mode="horizontal"
                 background-color="#82c8ec"
                 text-color="#fff"
                 active-text-color="#fff">
          <el-menu-item style="margin-left:160px;font-size: 20px" v-for="b in brandArr" :index="b.name+''">{{b.name}}</el-menu-item>
        </el-menu>
      </div>
      <!--蓝色导航菜单结束-->
    </el-header>
    <el-main style="width: 1200px;margin: 0 auto">
      <!--商品列表开始-->
      <el-row :gutter="20">
        <el-col :span="6" v-for="p in phoneArr" style="margin-top: 20px">
          <el-card style="width: 255px; height: 330px">
            <a :href="'/detail?id='+p.id">
              <img class="p_img" :key="p.id" :src="require('D:/files/'+p.url)" width="100%" alt="">
            </a>
            <div >
              <a style="text-decoration: none; color:#333333" :href="'/detail?id='+p.id">
                <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.name}}</p>
              </a>
              <div style="color: #666; margin-bottom: 10px">
                <span>￥{{p.price}}</span>
                <s style="font-size: 12px">{{p.oldPrice}}</s>
                <span style="margin-left:70px">销量:{{p.sales}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--商品列表结束-->
    </el-main>
    <el-footer>
      <div style="height: 95px;background-image: url('../../assets/imgs/wave.png');margin-bottom: -30px"></div>
      <div style="height: 100px;/*background-color: #3f3f3f;*/
            padding: 30px;text-align: center;color: #b1b1b1">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
      </div>
    </el-footer>
  </el-container>
  </div>
</template>

<script>
export default {
  name: "ResultView",
  data: function () {
    return {//在这里面定义变量
      brandArr: [],
      phoneArr:[],
      currentIndex:"",
      keywords:"",
      user:null
    }

  },
  mounted() {
    console.log("准备从服务器端加载【导航分类】....")
    let url ='http://localhost:9081';
    this.axios.get(url+'/brands/brandList').then((response) =>{
      let responseBody = response.data;
      console.log('接收到服务器端响应的结果：');
      console.log(responseBody);
      this.brandArr = responseBody.data;
    })

    //发请求获取当前客户端登录的用户对象
    this.axios.post(url+'/users/currentUser').then((res) =>{
      this.user=res.data;
      //如果没有登录得到的是""空字符串
      if(res.data==""){
        this.user=null;
      }
    })

      //index就是分类的id,通过传递过来的id查询和分类相关的商品
    if(location.search.indexOf("keywords")!=-1){//包含wd
      console.log(location.search)
      let keywords=location.search.split("=")[1];
      //通过传递过来的关键字查询相关商品
      this.axios.get(url+"/searches/"+keywords).then((response) => {
        this.phoneArr = response.data.data;
        console.log(this.phoneArr)
      })
    }else {//包含id
      //在created放法中需要访问data里面的
      //把地址栏中的分类id取出
       let currentIndex = location.search.split("=")[1];
      console.log(currentIndex);
      //通过地址栏中的分类id查询相关商品信息
      this.axios.get(url+"/phones/"+currentIndex).then((response) => {
        this.phoneArr = response.data.data;
      })
    }
  },
  methods:{
    logout(){
      if (confirm("您确认退出登录吗?")){
        let url ='http://localhost:9081/users/logout'
        this.axios.post(url).then(function () {
          location.href="/";//回到首页
        })
      }
    },
    handleSelect(index){
      //index就是分类的id,通过传递过来的id查询和分类相关的商品
      console.log(index);
      this.axios.get('http://localhost:9081/phones/'+index).then((response) =>{
        this.phoneArr = response.data.data;
        console.log(this.phoneArr)

      })
    },

    search() {
      console.log(this.keywords)
      this.axios.get("http://localhost:9081/searches/"+this.keywords).then((response) => {
        this.phoneArr = response.data.data;
      })
    }
  }
}
</script>

<style>
body{
  background-color: white;
}
header a {
  text-decoration: none;
  color: #6c6c6c;
}
a:hover{
  color: red;
}
.el-table .el-table__cell{
  padding: 0;/*去掉排行榜表格中上下的内边距*/
}
.el-table .cell{
  white-space: nowrap;/*让内容在一行中显示,不换行*/
  text-overflow: ellipsis;/*溢出部分用省略号表示*/
}
.p_img:hover{
  position: relative;
  bottom :5px;
  /*元素的阴影:x偏移值 y偏移值 浓度 范围 颜色*/
  box-shadow: 0 0 10px 5px #333;
}
</style>